<script lang="ts" setup>
import { type ArchiveVO, getArchiveListApi } from '@/request/api/article'
import type { ResultType } from '@/type/type'
import { RouteNameEnum } from '@/enum'
import ImageBox from '@/components/common/ImageBox.vue'

const archiveList = ref<ArchiveVO[]>([])
const getArchiveList = () => {
  getArchiveListApi().then((res: ResultType<ArchiveVO[]>) => {
    archiveList.value = res.data
  })
}

const router = useRouter()

onMounted(() => {
  getArchiveList()
})
</script>

<template>
  <el-container class="inner-box pt-20 gap-10" direction="vertical">
    <el-main class="h-96">
      <CarouselDeploy />
    </el-main>
    <template v-if="archiveList.length">
      <el-container v-for="item in archiveList" :key="item.classifyName" direction="vertical">
        <el-main class="!pb-0">
          <SvgIcon
            :message="item.classifyName"
            name="classify"
            parentClass="!text-xl w-fit pb-1 border-b-4"
            svg-class="!size-5"
          />
        </el-main>
        <el-main class="auto-column max-sm:auto-min-column gap-5">
          <a
            v-for="p in item.labelList"
            :key="p.labelName"
            class="image-box aspect-video use-transitions-shadow-short use-radius-sm use-shadow overflow-hidden relative flex items-center justify-center"
            href="javascript:"
            @click="
              router.push({
                name: RouteNameEnum.ARTICLE,
                params: { classifyId: item.classifyId, labelId: p.labelId }
              })
            "
          >
            <ImageBox :lazy="false" :url="p.imgUrl" class="absolute" />
            <span class="flex z-10 flex-col items-center text-gray-50">
              <span
                class="bg-amber-500 w-16 pt-1.5 pb-2 max-sm:text-sm text-center use-radius-sm use-transitions-shadow-short"
              >
                {{ p.articleCount }}
              </span>
              <span class="mt-2 ellipsis-1 px-8">{{ p.labelName }}</span>
            </span>
          </a>
        </el-main>
      </el-container>
    </template>
    <template v-else>
      <el-empty />
    </template>
  </el-container>
</template>

<style lang="scss" scoped>
.image-box {
  transform: translateZ(0);
}

.image-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
</style>
